<template>
    <div>
        <el-drawer
            title="学员管理"
            class="dialogForm"
            :visible="drawer == 'classmate'"
            direction="rtl"
            :before-close="handleClose"
            size="70%"
        >
            <el-table :data="studentList" style="width: 100%">
                <el-table-column type="index" width="50" align="center">
                </el-table-column>
                <el-table-column
                    prop="userInfo.nickname"
                    label="学员"
                    width="180"
                >
                </el-table-column>
                <el-table-column prop="date" label="学习进度">
                </el-table-column>
                <el-table-column prop="date" label="加入时间">
                </el-table-column>
                <el-table-column prop="remark" label="备注"> </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click="handleMark(scope.row, scope.$index)"
                            >备注</el-button
                        >
                        <el-button
                            @click="handleDel(scope.row, scope.$index)"
                            type="text"
                            size="small"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="param.pageIndex"
                :limit.sync="param.pageSize"
                @pagination="getList"
            />
        </el-drawer>
        <!-- 添加课或者节 -->
        <el-dialog :visible="dialogFormVisible" class="dialogForm">
            <div slot="title">
                修改备注
            </div>
            <el-form :model="titleForm">
                <el-form-item label="备注" label-width="120px">
                    <el-input
                        v-model="titleForm.remark"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetTitle">取 消</el-button>
                <el-button type="primary" @click="editStudent">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { editStudent, delStudent, studentList } from "@/api/edu/service";
export default {
    name: "Config",
    data() {
        return {
            studentList: [],
            dialogFormVisible: false,
            titleForm: {
                remark: ""
            },
            param: {
                pageIndex: 1,
                pageSize: 20
            },
            total: 0
        };
    },
    props: ["drawer", "courseId", "paramType"],
    watch: {
        drawer() {
            if (this.drawer == "classmate") {
                console.log(this.paramType);
                this.getList();
            }
        }
    },
    created() {},
    methods: {
        getList() {
            studentList(this.courseId, this.paramType, this.param).then(res => {
                this.studentList = res.data.list;
                this.total = res.data.count;
            });
        },
        handleMark(data, i) {
            this.titleForm.remark = data.remark;
            this.titleForm.courseStudentId = data.courseStudentId;
            this.titleForm.index = i;
            this.dialogFormVisible = true;
        },
        editStudent() {
            if (this.titleForm.remark != "") {
                editStudent(this.courseId, this.titleForm, this.paramType).then(
                    res => {
                        this.studentList[
                            this.titleForm.index
                        ].remark = this.titleForm.remark;
                        this.dialogFormVisible = false;
                    }
                );
            } else {
                this.$message.error("请填写备注");
            }
        },
        resetTitle() {
            this.titleForm.remark = "";
            this.dialogFormVisible = false;
        },
        handleClose(done) {
            this.resetForm();
            this.$emit("update:drawer", "");
        },
        handleDel(data, i) {
            this.$confirm("确认删除吗？", "", {
                type: "error"
            }).then(_ => {
                delStudent(
                    this.courseId,
                    data.courseStudentId,
                    this.paramType
                ).then(res => {
                    this.studentList.splice(i, 1);
                });
            });
        }
    }
};
</script>
<style lang="scss">
.dialogForm {
    display: block;
    .el-dialog {
        margin-top: 15vh !important;
    }
}
</style>
